<template>
  <div class="issues">
    <header></header>
    <main>
      <el-table :data="data">
        <el-table-column label="data" prop="data">
          <template #header>
            <ul class="table-nav">
              <li v-for="(item, index) in labels" :class="{active: index == 1 }">
                <span>{{ item.label }}</span>
                <span class="count">{{ item.count }}</span>
              </li>
            </ul>
            <div class="table-filter">
              <span>排序</span>
            </div>
          </template>
          <template #default="{ row }">
            <div class="title"></div>
            <div class="description"></div>
          </template>
        </el-table-column>
      </el-table>
    </main>
  </div>
</template>
<script setup lang="ts">
import { computed, reactive, ref } from 'vue'

const labels = ref<any[]>()
labels.value = [
  {
    label: '全部',
    count: 10
  },
  {
    label: '开启的',
    count: 2
  },
  {
    label: '进行中',
    count: 3
  },
  {
    label: '已完成',
    count: 5
  },
  {
    label: '已关闭',
    count: 0
  }
]

interface IsseusApi {
  id: string
  title: string
  description: string
  label: string
  creator: string
  author: string
  state: number
  priority: string
  startDate: string
  deadline: string
  topLevel: number
  createTime: string
  updateTime: string
}

const data = reactive<IsseusApi[]>([])

data.push(...[
  {
    id: '1',
    title: '标题',
    description: '描述',
    label: '错误 bug'
    creator: 
  }
] as IsseusApi[])
</script>

<style lang="scss" scoped>
.issues {
  main {
  }
}

:deep(.el-table) {
  ul {
    list-style: none;
    display: flex;
    li {
      padding: 0 10px;
      cursor: pointer;
      line-height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: normal;
      .count {
        display: inline-block;
        font-size: 12px;
        margin-left: 5px;
        padding: 5px;
        line-height: 0.5;
        font-weight: 500;
        background-color: #e8e8e8;
        border-radius: 500rem;
      }
      &:hover {
        color: #aeb2bf;
      }
    }
    .active {
      color: #40485b !important;
      font-weight: bold;
    }
  }
  .el-table__header .cell {
    display: flex;
    justify-content: space-between;
  }
}
</style>
